<template>
  <div id="app">
    <router-view class="content" />
    <van-tabbar v-show="isShow" route v-model="active" placeholder>
      <van-tabbar-item :to="{name: 'Home'}" icon="home-o">首页</van-tabbar-item>
      <van-tabbar-item :to="{name: 'Find'}" icon="search">发现</van-tabbar-item>
      <van-tabbar-item :to="{name: 'Order'}" icon="todo-list-o">订单管理</van-tabbar-item>
      <van-tabbar-item :to="{name: 'Car'}" icon="cart-o">购物车</van-tabbar-item>
      <van-tabbar-item :to="{name: 'User'}" icon="friends-o">我的</van-tabbar-item>
    </van-tabbar>
  </div>
</template>

<script>
export default {
  data() {
    return {
      active: 0,
      isShow: true,
    };
  },
  watch: {
    $route(v) {
      if (
        v.path == "/Details" ||
        v.path == "/SetUp" ||
        v.path == "/AddressList"
      ) {
        this.isShow = false;
      } else {
        this.isShow = true;
      }
    },
  },
};
</script>



<style>
html,
body,
#app {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
#app {
  display: flex;
  flex-direction: column;
}
#app .content {
  flex: 1;
  overflow: auto;
}
</style>
